<template>
	<view style="position: fixed;top:0;bottom:0;left:0;right:0;display: flex;flex-direction: column;">
		<view style="flex:1;" class="container">
			<view style="width: 100%;height: 100%">
				<bt-cropper
					ref="cropper" 
					:ratio="16/9" 
					:imageSrc="originUrl"
					@cropStart="cropStart" 
				>
				</bt-cropper>
			</view>
		</view> 
		
		<view @click="showComfirmModal=true" style="
			position: fixed;bottom: 0;
			left:0;right:0;
			height: 60px;
			display: flex;
			align-items: center;
			background-color: white;
			border-top: solid 1rpx #eee;
			"
		>
			<view @click="crop" style="
				display: flex;
				justify-content: center;
				align-items: center;
				padding: 10rpx 0rpx;
				border-radius: 10rpx;
				box-shadow: 0 0 14px 0 #66666635;
				border: solid 1rpx #ddd;
				top:10px;bottom: 10px;left:10px;right: 10px; 
				position: absolute;
			">
					剪裁
			</view>
		</view>
	</view>
	
<!-- 	<view style="width: 100%;background-color: aqua;position: relative;" :style="{paddingTop:`${9/16 * 100}%`}">
		<view style="position: absolute;top: 0;bottom: 0;left: 0;right: 0">
			<img style="width: 100%;height: 100%" :src="imageUrl" />
		</view>
	</view> -->
	

</template>

<script>
	export default {
		onLoad(options){
			this.originUrl = options.url || "http://www.apesk.net/static/avatar.jpg"
		},
		data() {
			return {
				originUrl:'',
				imageUrl:''
			}
		},
		methods: {
			cropStart(){
				uni.showToast({
					icon:'none',
					title:'cropStart'
				})
			},
			async crop() {
				console.log('crop')
				var that = this
				
				try{
					// 通过组件定义的ref调用cropper方法，返回一个promise对象
					var res = await this.$refs.cropper.crop()
					
					this.imageUrl = res
					console.log(res)
					
					uni.$emit('imageCrop',res)
					
					uni.navigateBack()
					
				}catch(e){
					// uni.showToast({
					// 	icon:'none',
					// 	title: e.stack
					// })
				}

			}
		}
	}
</script>

<style>

</style>